<!--
  @author heguanghua
  @since 2019/06/13 13:58
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<!--表格id与lay-filter属性一致，统一定义为zmn-table-->
<table class="layui-hide" id="zmn-table" lay-filter="zmn-table" th:fragment="table">
    <thead >
        <tr>
            <!--规定复选框列置于第1列，居中显示-->
            <th lay-data="{type:'checkbox', width:50, unresize:true, align:'center', fixed:'left'}"></th>
            <!--规定“排序”列置于第2列，居中显示-->
            <th lay-data="{field:'showSort', width:70, unresize:true, align:'center', edit:'text'}">排序</th>
            <!--规定“ID”列置于第3列，居中显示-->
            <th lay-data="{field:'categId', width:90, unresize:true, align:'center'}">分类ID</th>
            <!--规定“名称/标题”列置于第4列，通常居左显示，字数较少可以居中显示-->
            <th lay-data="{field:'showName', width:220, unresize:true, align:'center'}">服务分类前台名称</th>
            <th lay-data="{field:'name', unresize:true, align:'center'}">服务分类后台名称</th>
            <th lay-data="{field:'showSimpleSpell', width:80, unresize:true, align:'center', edit:json.hasEditSimpleSpell?'text':''}">分类简称</th>

            <th lay-data="{field:'showHomePageIcon', width:80, unresize:true, align:'center'}">首页icon</th>
            <th lay-data="{field:'showCategoryPagePicture', width:180, unresize:true, align:'center'}">分类页图片</th>

            <!--规定“状态”列靠后放置，居中显示-->
            <th lay-data="{field:'showStatus', width:100, unresize:true, align:'center'}">状态</th>
            <th lay-data="{field:'tariffName', width:100, unresize:true, align:'center'}">计价器名称</th>
<!--            <th lay-data="{field:'tariffStatus', width:100, unresize:true, align:'center'}">计价器状态</th>-->
            <th lay-data="{field:'showUpdaterAndUpdateTime', width:240, unresize:true, align:'center'}">最近修改人/时间</th>


            <!--规定操作列置于最后-->
            <th lay-data="{field:'操作', width:150, unresize:true, align:'center', fixed:'right'}">操作</th>
            <!--其他规范
                值较大的数字列居右显示，并使用千分号；值较小的数字列可居中显示，
                金额列统一居右显示，默认精确到小数点后2位，并使用千分号，
                通常情况下，时间或日期列靠后放置(操作列前)，居中显示
                -->
        </tr>
    </thead>
    <tbody>
        <tr th:each="item:${items}">
            <td ></td>
            <td th:text="${item.showSort}">showSort</td>
            <td th:text="${item.categId}">categId</td>
            <td th:text="${item.showName}">showName</td>
            <td th:text="${item.name}">name</td>
            <td th:text="${item.showSimpleSpell}">showSimpleSpell</td>

            <td>
                <div th:if="${item.showHomePageIcon!='' and item.showHomePageIcon!=null}">
                    <img width="50px" height="50px" th:src="${item.showHomePageIcon}">
                </div>
            </td>
            <td>
                <div th:if="${item.showCategoryPagePicture!=''and item.showCategoryPagePicture!=null}">
                    <img th:id="${item.categId}" th:onclick="previewImg([[${item.categId}]])" width="50px" height="50px" th:src="${item.showCategoryPagePicture}">
                </div>
            </td>

            <!--<td th:text="${T(com.zmn.plat.manager.dictionary.StatusEnum).of(item.showStatus).getName()}">showStatus</td>-->
            <td>
                <div th:onmouseover="|show_tips(${(#authPermit.checkPermit('/serv/showCateg/updateStatus.action'))},'请先开启“启用/停用”的权限',this)|">
                    <input th:disabled="${(#authPermit.checkPermit('/serv/showCateg/updateStatus.action'))?'false':'true'}" type="checkbox" name="status" id="status" th:key="${item.categId}" th:value="${item.showStatus}"
                           lay-text="ON|OFF" lay-skin="switch" lay-filter="chk_show_status" th:checked="${item.showStatus == 2}"/>
                </div>
            </td>
            <td th:text="${item.tariffName}">tariffName</td>
<!--            <td th:text="${item.tariffStatus==2?'启用':'停用'}">tariffStatus</td>-->
            <td th:text="${item.showUpdater} + '/' + ${T(com.zmn.common.utils.date.DateUtil).toString(item.showUpdateTime)}">showUpdaterAndUpdateTime</td>
            <td>
                <a th:if="${#authPermit.checkPermit('/serv/showCateg/detail.action')}" style="color: #00a0e9" lay-text="前台服务分类-修改" th:lay-href="|/serv/showCateg/detail.action?categId=${item.categId}|">修改<span>&nbsp;&nbsp;&nbsp;</span></a>
                <a th:if="${#authPermit.checkPermit('/serv/showCateg/classifyProduct.action')}" th:lay-href="|/serv/showCateg/classifyProduct.action?servCategId=${item.categId}|" style="color: #00a0e9" lay-text="关联前台产品分类">  关联产品分类</a>
            </td>
        </tr>
    </tbody>
</table>
